#debug {
  display: block;
  position: fixed;
  bottom: 0px; right: 0px; z-index: 2;
  width: 25%; height: 25%; overflow: scroll;
  visibility: hidden;
}

body {
  margin: 0px;
  border: 0px;
  padding: 0px;
}

div
{
  display: block;
  width: calc(100% - 3em);
  margin: 0px;
  padding: 0px;
  position: relative;
}

h1
{
  display: block;
  width: calc(100% - 3em);

  margin-bottom: 1ex;
  margin-top: 1ex;
  border-bottom: 1px solid;
  padding: 0px;

  font-weight: normal;
  font-size: 100%;
}

a {
  text-decoration: none;
}

div#filter {
  display: block;
  position: absolute;
  top : 0px;
  right: 30px;
  width: auto;
  padding: 3px 0px 1px 0px;
  z-index: 2;
}

select {
  -webkit-appearance: none;
  padding: 2px 18px 4px 4px;
  border-radius: 4px;
  border: 1px solid;
  background-size: 7px;
  background-position: calc(100% - 5px) 6px;
  background-repeat: no-repeat;
}

div#run-state {
  display: block;
  position: fixed;
  top: 0px;
  right: 0px;
  width: auto;
  padding: 3px 5px 1px 7px;
  z-index: 2;
}

div#run-state span {
  vertical-align: middle;
}

div#run-state span a img {
  position: relative;
  top: 3px;
}

.disabled {
  display: none;
}

#marker {
  position: absolute;
  left: 2px;
  font-size: 200%;
  z-index: 2;
}

#goal {
  padding-left: 2em;
}

#messages div {
  padding-left: 2em;
}

/* the default colors are for vscode-light color theme */

h1 {
  border-bottom-color: black;
}

div.error h1 a {
  color: darkred;
}

div.warning h1 a {
  color: darkorange;
}

div.information h1 a {
  color: darkgreen;
}

div#run-state {
  background-color: #f0f0f0;
}

select {
  border-color: black;
  color: black;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='black'><polygon points='0,0 40,0 20,40'/></svg>");
  background-color: #f0f0f0;
}

/* Theme categories, set by VS Code in the body element:
- vscode-light
- vscode-dark
- vscode-high-contrast */

.vscode-dark h1 {
  border-bottom-color: lightgray;
}

.vscode-dark div.error h1 a {
  color: red;
}

.vscode-dark div.warning h1 a {
  color: orange;
}

.vscode-dark div.information h1 a {
  color: lightgreen;
}

.vscode-dark div.error h1 {
  color: red;
}

.vscode-dark div.warning h1 {
  color: orange;
}

.vscode-dark div.information h1 {
  color: lightgreen;
}

.vscode-dark div#run-state {
  background-color: #222;
}

.vscode-dark select {
  border-color: lightgray;
  color: lightgray;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='lightgray'><polygon points='0,0 40,0 20,40'/></svg>");
  background-color: #222;
}

.vscode-high-contrast h1 {
  border-bottom-color: white;
}

.vscode-high-contrast div.error h1 a {
  color: lightpink;
}

.vscode-high-contrast div.warning h1 a {
  color: yellow;
}

.vscode-high-contrast div.information h1 a {
  color: lightgreen;
}

.vscode-high-contrast div.error h1 {
  color: lightpink;
}

.vscode-high-contrast div.warning h1 {
  color: yellow;
}

.vscode-high-contrast div.information h1 {
  color: lightgreen;
}

.vscode-high-contrast div#run-state {
  background-color: #000;
}

.vscode-high-contrast select {
  border-color: white;
  color: white;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='white'><polygon points='0,0 40,0 20,40'/></svg>");
  background-color: #000;
}

.goal-goals { color: #569cd6; }
.goal-vdash { color: #569cd6; }
.goal-case { color: #a1df90; }
.goal-hyp { color: #ffcc00; }

.vscode-light .goal-goals { color: #367cb6; }
.vscode-light .goal-vdash { color: #367cb6; }
.vscode-light .goal-case { color: #1f7a1f; }
.vscode-light .goal-hyp { color: #cc7a00; }
